<template>
    <div class="min-h-screen h-screen bg-[#f5f5f5] box-border relative">
        <!-- <div  class="fixed font-bold text-2xl z-[9999] flex items-center">
            <span @click="router.back()" class="cursor-pointer ml-2 "> {{ isHide ? '>' : '<'
                    }}</span>
        </div> -->
        <div v-if="router.currentRoute.value.path !== '/Login'"
            class="fixed top-0 left-0 w-full h-[50px] bg-white z-[3]">
            <div class="flex items-center justify-between h-full p-2">
                <div class="flex items-center">
                    <span class="text-2xl font-bold">知库</span>
                    <nav class="ml-8 flex items-center gap-6">
                        <NuxtLink v-for="item in menuList" :key="item.path" :to="item.path"
                            class="text-base font-medium px-3 py-1 rounded hover:bg-gray-100 transition" :class="{
                                'text-indigo-600 font-bold bg-gray-100': router.currentRoute.value.path === item.path
                            }">
                            {{ item.name }}
                        </NuxtLink>
                    </nav>
                </div>
                <button class="ml-4 px-4 py-1 rounded bg-red-50 text-red-600 font-medium hover:bg-red-100 transition"
                    @click="logout">
                    退出登录
                </button>
            </div>
        </div>
        <!-- {{ userStore.user }} -->
        <!-- <div 
            v-if="ifShow"
            :class="'h-[50px] w-[50px] z-[9999] shadow-lg bg-white cursor-pointer rounded-full fixed ' + blockPosition"
            @click="openMenu">
            <img src="/pointer.svg" alt="v" class="select-none pointer-events-none z-10">
        </div> -->


        <!-- <div 
            v-if="menuShow" 
            class="fixed z-[9998] bg-gray-300 opacity-[0.5] h-full w-full"
            @click="menuShow = false" />
        <div 
            v-if="menuShow"
            class="fixed z-[9999] w-auto p-4 bg-white top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] shadow-lg rounded-[20px] shadow-lg">
            <div 
                v-for="item in menuList" 
                :key="item.path" 
                class="flex items-center justify-start"
                @click="handleMenuClick(item.path)">
                <div class="bg-white p-2 cursor-pointer border-b border-gray-300 w-[100px]">
                    <span>{{ router.currentRoute.value.path === item.path ? '✓' : '' }}</span>
                    {{ item.name }}
                </div>
                <div v-if="item.children" class="flex flex-col ml-10 mb-4 p-2">
                    <div 
                        v-for="child in item.children" 
                        :key="child.path" 
                        class="flex items-center justify-center"
                        @click.stop="handleMenuClick(child.path)">
                        <div class=" h-full bg-white p-2 cursor-pointer  border-gray-300 w-[100px]">
                            <span>{{ router.currentRoute.value.path === child.path ? '✓' : '' }}</span>
                            {{ child.name }}
                        </div>
                    </div>
                </div>
            </div>
            <div 
                class="flex items-center justify-start" 
                @click="handleMenuClick('/Login')">
                <div class=" h-full bg-white p-2 cursor-pointer  border-gray-300 w-[100px]">
                    <span class="text-red-500">退出登录</span>
                </div>
            </div>

        </div> -->
        <div class="min-h-full h-full mx-auto box-border relative bg-gray-100 "
            :style="{ marginTop: router.currentRoute.value.path !== '/Login' ? '50px' : '0px', height: router.currentRoute.value.path !== '/Login' ? 'calc(100vh - 50px)' : '100vh' }">
            <slot />
        </div>
    </div>
</template>

<script setup>
const router = useRouter()
const userStore = useUserStore()
const blockPosition = ref('right-[10px] bottom-[300px]')
const ifShow = computed(() => {
    return userStore.token ? true : false
})
const menuShow = ref(false)
const menuList = computed(() => {
    if (userStore.user?.authority === 1) {
        return [
            //     {
            //     name: '首页',
            //     path: '/Home',
            // },
            {
                name: '公共题库',
                path: '/StudyArea/Topics',
            },

            {
                name: '提交题目',
                path: '/StudyArea/Topics/MyTopic',
            },
            {
                name: '审核题目',
                path: '/StudyArea/Topics/Review',
            },
            {
                name: '论坛',
                path: '/StudyArea/Forum',
                children: [
                    {
                        name: '论坛',
                        path: '/StudyArea/Forum',
                    },
                ],
            },
            {
                name: '简历',
                path: '/StudyArea/Resume',
            },
            {
                name: '个人中心',
                path: '/User',
                children: [
                    {
                        name: '个人中心',
                        path: '/User',
                    },
                ],
            }]
    } else {
        return [
            //     {
            //     name: '首页',
            //     path: '/Home',
            // },
            {
                name: '公共题库',
                path: '/StudyArea/Topics',
            },
            {
                name: '提交题目',
                path: '/StudyArea/Topics/MyTopic',
            },
            {
                name: '论坛',
                path: '/StudyArea/Forum',
                children: [
                    {
                        name: '论坛',
                        path: '/StudyArea/Forum',
                    },
                ],
            },
            {
                name: '简历',
                path: '/StudyArea/Resume',
            },
            {
                name: '个人中心',
                path: '/User',
                children: [
                    {
                        name: '个人中心',
                        path: '/User',
                    },
                ],
            }]
    }
})



const _isHide = ref(false)
const openMenu = () => {
    menuShow.value = !menuShow.value
}

const _title = computed(() => {
    return router.currentRoute.value.path
})

// 退出登录
const logout = () => {
    userStore.clearAuth()
    router.push('/login')
}

const handleMenuClick = (path) => {
    menuShow.value = false
    if (path === '/Login') {
        logout()
        return
    }
    router.push(path)
}

</script>